<#assign pageName="公共模板实例-音视频上传">
<@override name="head-styles">
    <style>
        .layui-input-block{
            margin-left:0px;
        }
    </style>
</@override>
<@override name="page-content">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>${pageName}</legend>
    </fieldset>
    <h4 style="font-weight:bold; padding:10px;">1、功能演示 <span style="color:red;">(未开通视频点播无法正常上传)</span></h4>
    <form class="layui-form padding-10" lay-filter="formTemplate">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <div id="upload-box">
                    <div class="upload-percent"></div>
                    <button type="button" class="layui-btn upload-btn">
                         <i class="layui-icon">&#xe67c;</i>选择文件
                    </button>
                    <input type="file" name="file" id="files" class="upload-vod" style="display:none;" multiple/>
                 </div>
            </div>
        </div>
    </form>
    <h4 style="font-weight:bold; padding:10px;">2、实例代码</h4>
    <pre class="layui-code code-html" lay-encode=true>
        <!-- 为功能演示正常而引入注释！
        <form class="layui-form padding-10" lay-filter="formTemplate">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <div id="upload-box">
                        <div class="upload-percent"></div>
                        <button type="button" class="layui-btn upload-btn">
                             <i class="layui-icon">&#xe67c;</i>选择文件
                        </button>
                        <input type="file" name="file" id="files" class="upload-vod" style="display:none;" multiple/>
                     </div>
                </div>
            </div>
        </form> 
        -->
    </pre>
    <pre class="layui-code code-js" lay-encode=true>
        <!-- 为功能演示正常而引入注释！
        <script src="${contextPath}/assets/plugins/aliyun/lib/es6-promise.min.js"></script>
        <script src="${contextPath}/assets/plugins/aliyun/lib/aliyun-oss-sdk-5.3.1.min.js"></script>
        <script src="${contextPath}/assets/plugins/aliyun/aliyun-upload-sdk-1.5.0.min.js"></script>
        <script src="${contextPath}/assets/plugins/aliyun/aliyun-config.js"></script>
        <script>
            $(function(){
                var tinyId = "mytextarea";
                layui.use(['form','layer', 'jquery'], function(){
                    var form = layui.form;
                    var layer=layui.layer;
                    $=layui.jquery;
                    form.on('submit(submit)', function(data){
                        //打印数据
                        console.log(data.field);
                    });
                })
            })
        </script>
         -->
    </pre>
    <h4 style="font-weight:bold; padding:10px;">3、功能说明</h4>
    <p>1、音视频上传使用阿里云点播客户端上传方式，文档参考<a href="https://help.aliyun.com/document_detail/55398.html?spm=a2c4g.11186623.6.648.e83127c9cB9MwZ" target="_blank">https://help.aliyun.com/document_detail/55398.html?spm=a2c4g.11186623.6.648.e83127c9cB9MwZ</a></p>
    <p>2、音视频上传上传需开通视频点播且在aliyun-config.js中配置阿里账号ID，必须有值,可根据实际情况修改！</p>
    <p>3、音视频上传默认配置aliyun-config.js中，可根据需求修改！</p>
    <p>4、音视频上传后台由AliyunUploadController.java支持！</p>
</@override>
<@override name="page-scripts">
    <!--  IE需要es6-promise -->
    <script src="${contextPath}/assets/plugins/aliyun/lib/es6-promise.min.js"></script>
    <script src="${contextPath}/assets/plugins/aliyun/lib/aliyun-oss-sdk-5.3.1.min.js"></script>
    <script src="${contextPath}/assets/plugins/aliyun/aliyun-upload-sdk-1.5.0.min.js"></script>
    <script src="${contextPath}/assets/plugins/aliyun/aliyun-config.js"></script>
    <script>
        $(function(){
            var tinyId = "mytextarea";
            layui.use(['form','layer', 'jquery', 'code'], function(){
                var form = layui.form;
                var layer=layui.layer;
                $=layui.jquery;
                layui.code({elem:'.code-html',title:'html', skin:'notepad'});
                layui.code({elem:'.code-js',title:'javascript', skin:'notepad'});
                form.on('submit(submit)', function(data){
                    //打印数据
                    console.log(data.field);
                });
            })
        })
    </script>
</@override>
<@extends name="/layout/basepage.html"/> 